<script>
import axios from "axios";
// import instance from "@/api/api";
import {getCourseListNew} from "@/api/http";

export default {
  name: "axiosPage",
  data() {
    return {
      picList: [],
      freeList: [],
      boutiqueList: [],
      courseParams:{
        type: 'boutique',
        pageNum: 1,
        pageSize: 5
      }

    }
  },
  methods: {
    //   封装
    // getCourseList(type) {
      // 第一次封装
      /*return api.post('https://showme2.myhope365.com/online_course/weChat/applet/course/list/type', {
        type,
        pageNum: 1,
        pageSize: 5
      }, {
        headers: {
          'content-type': "application/x-www-form-urlencoded"
        }
      })*/


    /*//   二次封装   因为将请求头信息和地址 引到src/api/api.js文件中后
      return instance.post('/weChat/applet/course/list/type', {
        type,
        pageNum: 1,
        pageSize: 5
      })*/

    // }


    // 第三次封装
    getCourseListNew1(){
      getCourseListNew(this.courseParams).then(res => {
        console.log(res, '免费')
        if (res.code === 0) {
          this.freeList = res.rows
        }
      })
    }


  },


  created(){
    // console.dir(api)
    // api.get('地址')   地址：协议（http  https）+主机(域名   ip（公网ip  私网ip）)+端口+路径+参数（？拼接   &参数1=参数1值）
    // console.log(api.get('https://showme2.myhope365.com/online_course/weChat/applet/course/banner/list?number=5'))//promise对象
    // get 请求
    axios.get('https://showme2.myhope365.com/online_course/weChat/applet/course/banner/list?number=5').then(res => {
      console.log(res, '成功')
      this.picList = res.data.data
    }).catch(err => {
      console.log(err)
    }).finally(com => {
      console.log(com)
    })


    //   post请求
    // 免费课程
    // api.post('路径',data,配置)
    /*api.post('https://showme2.myhope365.com/online_course/weChat/applet/course/list/type',{
          type: 'free',
          pageNum:1,
          pageSize:5
    },{
      // 配置请求头
      headers: {
        'content-type': "application/x-www-form-urlencoded"
        // contentType: "application/x-www-form-urlencoded"  //会报错
      }
    }).then(res=>{
      console.log(res,'课程')
      if (res.data.code === 0) {
        this.freeList = res.data.rows
      }
    })*/

    /*api.post('https://showme2.myhope365.com/online_course/weChat/applet/subject/list',{
      enable:1
    }).then(res=>{
      console.log(res,'enable')
    })*/


    /*// 第一次封装时调用
    this.getCourseList('free').then(res => {
      console.log(res, '免费')
      if (res.data.code === 0) {
        this.freeList = res.data.rows
      }
    })*/


    /*// 第二次封装时调用
    this.getCourseList('free').then(res => {
      console.log(res, '免费')
      if (res.code === 0) {
        this.freeList = res.rows
      }
    })*/








    // 精品课程
    /*api.post('https://showme2.myhope365.com/online_course/weChat/applet/course/list/type', {
      type: 'boutique',
      pageNum: 2,
      pageSize: 5
    }, {
      headers: {
        'content-type': "application/x-www-form-urlencoded"
      }
    }).then(res => {
      console.log(res, '课程')
      if (res.data.code === 0) {
        this.boutiqueList = res.data.rows
      }
    })*/


    /*// 第一次封装时调用
    this.getCourseList('boutique').then(res => {
      console.log(res, '精品')
      if (res.data.code === 0) {
        this.boutiqueList = res.data.rows
      }
    })*/

    /*// 第二次封装时调用
    this.getCourseList('boutique').then(res => {
      console.log(res, '精品')
      if (res.code === 0) {
        this.boutiqueList = res.rows
      }
    })*/


    // console.log(instance, 'instance')
    // console.log(instance.get('https://showme2.myhope365.com/online_course/weChat/applet/course/banner/list?number=5'))
    /*instance.post('https://showme2.myhope365.com/online_course/weChat/applet/course/list/type',{
      type: 'free',
      pageNum:1,
      pageSize:5
    },{
      headers: {
        'content-type': "application/x-www-form-urlencoded"
      }
    }).then(res=>{
      console.log(res,'课程response')
      if (res.data.code === 0) {
        this.freeList = res.data.rows
      }
    })*/


    // 将请求头信息和地址 引到src/api/api.js文件中后
    /*instance.post('/weChat/applet/course/list/type',{
      type: 'free',
      pageNum:1,
      pageSize:5
    },).then(res=>{
      console.log(res,'课程response11111')
      if (res.code === 0) {
        this.freeList = res.rows
      }
    })*/

    // 第三次封装     请求免费课程
    this.getCourseListNew1()

  }
}

</script>

<template>
  <div>
    axios请求
    <img class="pic" v-for="item in picList" :key="item.id" :src="item.imgUrl" alt="">

    <h1>免费课程</h1>
    <div class="free">
      <div class="free-item" v-for="item in freeList" :key="item.courseId">
        <img :src="item.bannerFileUrl" alt="">
        <p>{{ item.courseTitle }}</p>
        <p>免费</p>
      </div>
    </div>

    <h1>精品课程</h1>
    <div class="free">
      <div class="free-item" v-for="item in boutiqueList" :key="item.courseId">
        <img :src="item.bannerFileUrl" alt="">
        <p>{{ item.courseTitle }}</p>
        <p v-if="item.isFree==='1'">免费</p>
        <p v-else-if="item.isDiscount==='1'">{{ item.discountPrice }}
          <del>{{ item.coursePrice }}</del>
        </p>
        <p v-else>{{ item.coursePrice }}</p>
      </div>
    </div>


  </div>
</template>

<style scoped lang="less">
.pic {
  width: 200px;
}

.free {
  display: flex;
  width: 1200px;
  justify-content: space-around;

  &-item {
    width: 18%;

    img {
      width: 100%;
    }
  }
}
</style>